<!DOCTYPE html>
<html>
<head>
	<title>h5邀请函</title>
	<meta charset='utf-8'>
	<meta name='viewport' content='width=device-width,initial-scale=1.0,user-scalable=no'>
	<meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="format-detection" content="telephone=no">
    <link rel="stylesheet" href="static/mystyle.css">
    <script src='static/idangerous.swiper-2.0.min.js'></script>
    <script src='static/zepto.min.js'></script>

<style>
body,html{-webkit-text-size-adjust:100%;padding:0;margin:0;height:100%;font-size:14px;font-family:'宋体',"Helvetica","Arial","Verdana","sans-serif"}
input{font-size:100%;margin:0;padding:0;border:none;}
div,span,a{-webkit-tap-highlight-color:rgba(255,255,255,0);}
input:focus,a:focus{outline:none}
img{display:inline-block;width:100%;}

.p_r{position:relative;}
.p_a{position:absolute;left:0;}

.swiper-wrapper,.swiper,.swiper-slide{height:100%;overflow:hidden;}
.swiper-slide{background-color:#d9edf6;position:relative;}

#container{height:100%;}
.tit{margin-top:8.11%;}
.tit img{display:none;}
.swiper{height:100%;}

.swiper-slide div[class^='img']{position:absolute;}
.swiper-slide div[class^='img'] img{position:relative;opacity:0;
    /*-webkit-animation-fill-mode:forwards!important;animation-fill-mode:forwards!important;*/
}

/* page1 */
.page1 .img1{width:26.25%;bottom:9.65%;left:8.75%;}
.page1 .img2{width:66.09%;bottom:8.21%;left:22.8%;}
.page1 .img3{width:66.09%;bottom:20.18%;left:32.06%;}
.page1 .img4{width:20.93%;bottom:57.39%;right:32.37%;}
.page1 .img5{width:20.93%;bottom:48.21%;right:17.68%;}
.page1 .img6{width:20.93%;bottom:39.51%;right:2.5%;}
.page1 .img1 img.myanimate{
    -webkit-animation:slideInLeft .5s forwards 0s;
    animation-duration:slideInLeft .5s forwards 0s;
}
.page1 .img2 img.myanimate{
    -webkit-animation:slideInRight .5s forwards .3s;
    animation-duration:slideInRight .5s forwards .3s;
}
.page1 .img3 img.myanimate{
    -webkit-animation:slideInRight .5s forwards .6s;
    animation-duration:slideInRight .5s forwards .6s;
}
.page1 .img4 img.myanimate{
    -webkit-animation:fadeIn .5s forwards .9s;
    animation-duration:fadeIn .5s forwards .9s;
}
.page1 .img5 img.myanimate{
    -webkit-animation:fadeIn .5s forwards 1.2s;
    animation-duration:fadeIn .5s forwards 1.2s;
}
.page1 .img6 img.myanimate{
    -webkit-animation:fadeIn .5s forwards 1.5s;
    animation-duration:fadeIn .5s forwards 1.5s;
}

/* page2 */
.page2 .img1{width:36.4%;bottom:14.32%;left:20.46%;}
.page2 .img2{width:23.59%;bottom:41.11%;left:12.81%;}
.page2 .img3{width:31.40%;bottom:43.09%;right:22.18%;}
.page2 .img4{width:44.06%;bottom:11.69%;right:15%;}
.page2 .img1 img.myanimate{
    -webkit-animation:slideInLeft .5s forwards 0s;
    animation-duration:slideInLeft .5s forwards 0s;
}
.page2 .img4 img.myanimate{
    -webkit-animation:slideInRight .5s forwards .3s;
    animation-duration:slideInRight .5s forwards .3s;
}
.page2 .img2 img.myanimate{
    -webkit-animation:fadeIn .5s forwards .8s;
    animation-duration:fadeIn .5s forwards .8s;
}
.page2 .img3 img.myanimate{
    -webkit-animation:fadeIn .5s forwards 1.3s;
    animation-duration:fadeIn .5s forwards 1.3s;
}

/* page3 */
.page3 .img1{width:100%;bottom:14.39%;left:0;}
.page3 .img2{width:6.4%;bottom:40.51%;right:45.94%;}
.page3 .img3{width:23.59%;bottom:38.84%;left:3.12%;}
.page3 .img4{width:23.59%;bottom:46.18%;left:27.03%;}
.page3 .img5{width:23.59%;bottom:42.89%;right:23.9%;}
.page3 .img6{width:23.59%;bottom:34.39%;right:3.12%;}
.page3 .img1 img.myanimate{
    -webkit-animation:zoomIn .5s forwards 0s;
    animation-duration:zoomIn .5s forwards 0s;
}
.page3 .img2 img.myanimate{
    -webkit-animation:fadeIn .5s forwards .5s;
    animation-duration:fadeIn .5s forwards .5s;
}
.page3 .img3 img.myanimate{
    -webkit-animation:fadeInUp .5s forwards 1.4s;
    animation-duration:fadeInUp .5s forwards 1.4s;
}
.page3 .img4 img.myanimate{
    -webkit-animation:fadeInUp .5s forwards 2.2s;
    animation-duration:fadeInUp .5s forwards 2.2s;
}
.page3 .img5 img.myanimate{
    -webkit-animation:fadeInUp .5s forwards 3s;
    animation-duration:fadeInUp .5s forwards 3s;
}
.page3 .img6 img.myanimate{
    -webkit-animation:fadeInUp .5s forwards 3.8s;
    animation-duration:fadeInUp .5s forwards 3.8s;
}

/* page4 */
.page4 .img1{width:65.12%;bottom:28.01%;left:19.84%;}
.page4 .img2{width:100%;bottom:18.16%;left:0;}
.page4 .img3{width:100%;bottom:12.56%;left:0;}
.page4{background:#d4e8f6 url(img/page4_bg.jpg) center bottom no-repeat;background-size:100%}
.page4 .img1 img.myanimate{
    -webkit-animation:fadeInUp .5s forwards 0s;
    animation-duration:fadeInUp .5s forwards 0s;
}
.page4 .img2 img.myanimate{
    -webkit-animation:slideInLeft .5s forwards .8s;
    animation-duration:slideInLeft .5s forwards .8s;
}
.page4 .img3 img.myanimate{
    -webkit-animation:slideInRight .5s forwards 1.6s;
    animation-duration:slideInRight .5s forwards 1.6s;
}

/* page5 */
.page5 .img1{width:100%;top:26.95%;left:0;}
.page5 .img2{width:100%;top:57.77%;left:0;}
.page5 .img3{width:100%;bottom:3.2%;left:0;}
.page5 .img1 img.myanimate{
    -webkit-animation:fadeInUp .5s forwards 0s;
    animation-duration:fadeInUp .5s forwards 0s;
}
.page5 .img2 img.myanimate{
    -webkit-animation:fadeInUp .5s forwards .5s;
    animation-duration:fadeInUp .5s forwards .5s;
}
.page5 .img3 img.myanimate{
    -webkit-animation:tada .5s forwards 1s;
    animation-duration:tada .5s forwards 1s;
}

/* page6 */
.page6 .img1{width:100%;top:28.11%;left:0;}
.page6 .img2{width:100%;top:57.97%;left:0;}
.page6 .img3{width:58.75%;bottom:5.4%;left:20.62%;}
.page6 .img1 img.myanimate{
    -webkit-animation:slideInLeft .5s forwards 0s;
    animation-duration:slideInLeft .5s forwards 0s;
}
.page6 .img2 img.myanimate{
    -webkit-animation:slideInRight .5s forwards .8s;
    animation-duration:slideInRight .5s forwards .8s;
}
.page6 .img3 img.myanimate{
    -webkit-animation:rotateInUpLeft 1s forwards 1.6s;
    animation-duration:rotateInUpLeft 1s forwards 1.6s;
}

/* page7 */
.page7 .img1{width:100%;top:32.85%;left:0;}
.page7 .img1 img.myanimate{
    -webkit-animation:flipInY 1s forwards 0s;
    animation-duration:flipInY 1s forwards 0s;
}

/* page8 */
.page8 .img1{width:31.25%;bottom:25.21%;left:38.28%;}
.page8 .img2{width:33.21%;bottom:35.26%;left:2.3%;}
.page8 .img3{width:33.21%;top:27.85%;left:33.65%;}
.page8 .img4{width:33.21%;bottom:34.49%;right:2.28%;}
.page8 .img5{width:85%;bottom:12.07%;left:7.5%;}
.page8 .img6{width:66.4%;bottom:4.07%;left:17%;}
.page8 .img1 img.myanimate{
    -webkit-animation:flash 1s forwards 0s;
    animation-duration:flash 1s forwards 0s;
}
.page8 .img2 img.myanimate{
    -webkit-animation:fadeInUp .5s forwards 1s;
    animation-duration:fadeInUp .5s forwards 1s;
}
.page8 .img3 img.myanimate{
    -webkit-animation:fadeInUp .5s forwards 1.5s;
    animation-duration:fadeInUp .5s forwards 1.5s;
}
.page8 .img4 img.myanimate{
    -webkit-animation:fadeInUp .5s forwards 2s;
    animation-duration:fadeInUp .5s forwards 2s;
}
.page8 .img5 img.myanimate{
    -webkit-animation:zoomInDown .5s forwards 2.5s;
    animation-duration:zoomInDown .5s forwards 2.5s;
}
.page8 .img6 img.myanimate{
    -webkit-animation:flipInY .5s forwards 3s;
    animation-duration:flipInY .5s forwards 3s;
}

/* page9 */
.page9_cont{width:100%;left:0;top:20.24%;text-align:center;}
.page9_cont input{height:3rem;width:85%;display:inline-block;box-sizing:border-box;margin:.7rem auto;border-radius:50px;padding-left:1rem;background-clip:padding-box;}
.page9_cont a{display:block;width:85%;margin:.7rem auto;}

/* pagelog */
.pagelog .img1{width:100%;bottom:55.74%;left:0;}
.pagelog .img2{width:100%;bottom:31.36%;left:0;}
.pagelog .img3{width:100%;bottom:7.29%;left:0;}
.pagelog .tit{width:40.3%;margin-left:auto;margin-right:auto;}
.pagelog .img1 img.myanimate{
    -webkit-animation:slideInUp .5s forwards 0s;
    animation-duration:slideInUp .5s forwards 0s;
}
.pagelog .img2 img.myanimate{
    -webkit-animation:slideInUp .5s forwards .5s;
    animation-duration:slideInUp .5s forwards .5s;
}
.pagelog .img3 img.myanimate{
    -webkit-animation:slideInUp .5s forwards 1s;
    animation-duration:slideInUp .5s forwards 1s;
}



</style>
</head>

<body>
    <div id="container" class='p_r'>
        <div class="swiper">
            <div class="swiper-wrapper">


                <div class="swiper-slide page1">
                    <div class="tit">
                        <img src="img/tit_page1.png" alt="" style='display:block'>
                    </div>
                    <div class="img1 img_an">
                        <img src="img/page1_1.png" alt="">
                    </div>
                    <div class="img2 img_an">
                        <img src="img/page1_2.png" alt="">
                    </div>
                    <div class="img3 img_an">
                        <img src="img/page1_3.png" alt="">
                    </div>
                    <div class="img4 img_an">
                        <img src="img/page1_4.png" alt="">
                    </div>
                    <div class="img5 img_an">
                        <img src="img/page1_5.png" alt="">
                    </div>
                    <div class="img6 img_an">
                        <img src="img/page1_6.png" alt="">
                    </div>
                </div>

                <div class="swiper-slide page2">
                    <div class="tit">
                        <img src="img/tit_page2.png" alt="">
                    </div>

                    <div class="img1 img_an">
                        <img src="img/page1_1.png" alt="">
                    </div>
                    <div class="img2 img_an">
                        <img src="img/page2_1.png" alt="">
                    </div>
                    <div class="img3 img_an">
                        <img src="img/page2_2.png" alt="">
                    </div>
                    <div class="img4 img_an">
                        <img src="img/page2_3.png" alt="">
                    </div>
                </div>   


                <div class="swiper-slide page3">
                    <div class="tit">
                        <img src="img/tit_page3.png" alt="">
                    </div>

                    <div class="img1 img_an">
                        <img src="img/page3_1.png" alt="">
                    </div>
                    <div class="img2 img_an">
                        <img src="img/page3_2.png" alt="">
                    </div>
                    <div class="img3 img_an">
                        <img src="img/page3_3.png" alt="">
                    </div>
                    <div class="img4 img_an">
                        <img src="img/page3_4.png" alt="">
                    </div>
                    <div class="img5 img_an">
                        <img src="img/page3_5.png" alt="">
                    </div>
                    <div class="img6 img_an">
                        <img src="img/page3_6.png" alt="">
                    </div>
                </div>   
                 

                <div class="swiper-slide page4">
                    <div class="tit">
                        <img src="img/tit_page4.png" alt="">
                    </div>

                    <div class="img1 img_an">
                        <img src="img/page4_1.png" alt="">
                    </div>
                    <div class="img2 img_an">
                        <img src="img/page4_2.png" alt="">
                    </div>
                    <div class="img3 img_an">
                        <img src="img/page4_3.png" alt="">
                    </div>
                </div>  

                
                <div class="swiper-slide page5">
                    <div class="tit">
                        <img src="img/tit_page5.png" alt="">
                    </div>

                    <div class="img1 img_an">
                        <img src="img/page5_1.png" alt="">
                    </div>
                    <div class="img2 img_an">
                        <img src="img/page5_2.png" alt="">
                    </div>
                    <div class="img3 img_an">
                        <img src="img/page5_3.png" alt="">
                    </div>
                </div>

                
                <div class="swiper-slide page6">
                    <div class="tit">
                        <img src="img/tit_page6.png" alt="">
                    </div>

                    <div class="img1 img_an">
                        <img src="img/page6_1.png" alt="">
                    </div>
                    <div class="img2 img_an">
                        <img src="img/page6_2.png" alt="">
                    </div>
                    <div class="img3 img_an">
                        <img src="img/page6_3.png" alt="">
                    </div>
                </div>

                <div class="swiper-slide pagelog">
                    <div class="tit">
                        <img src="img/tit_pagelog.png" alt="">
                    </div>
                    <div class="img1 img_an">
                        <img src="img/pagelog_1.png" alt="">
                    </div>
                    <div class="img2 img_an">
                        <img src="img/pagelog_2.png" alt="">
                    </div>
                    <div class="img3 img_an">
                        <img src="img/pagelog_3.png" alt="">
                    </div>
                </div>

              
                
                <div class="swiper-slide page7">
                    <div class="tit">
                        <img src="img/tit_page7.png" alt="">
                    </div>

                    <div class="img1 img_an">
                        <img src="img/page7_1.png" alt="">
                    </div>
                </div>

                <div class="swiper-slide page8">
                    <div class="tit">
                        <img src="img/tit_page8.png" alt="">
                    </div>
                    <div class="img1 img_an">
                        <img src="img/page8_1.png" alt="">
                    </div>
                    <div class="img2 img_an">
                        <img src="img/page8_2.png" alt="">
                    </div>
                    <div class="img3 img_an">
                        <img src="img/page8_3.png" alt="">
                    </div>
                    <div class="img4 img_an">
                        <img src="img/page8_4.png" alt="">
                    </div>
                    <div class="img5 img_an" class='swiper-no-swiping'>
                        <img src="img/page8_5.png" alt="" class='swiper-no-swiping'>
                    </div>
                    <div class="img6 img_an">
                        <img src="img/page8_6.png" alt="">
                    </div>
                </div>
 
                <div class="swiper-slide page9">
                    <div class="tit">
                        <img src="img/tit_page9.png" alt="">
                    </div>

                    <div class="page9_cont p_a">
                        <input type="text" placeholder='公司名称' class='swiper-no-swiping'>
                        <input type="text" placeholder='员工数量' class='swiper-no-swiping'>
                        <input type="text" placeholder='联系人姓名' class='swiper-no-swiping'>
                        <input type="text" placeholder='联系电话' class='swiper-no-swiping'>
                        <input type="text" placeholder='邮箱' class='swiper-no-swiping'>
                        <a href="javascript:void(0)" class='swiper-no-swiping'>
                            <img src="img/page9_btn.png" alt="" class='swiper-no-swiping'>
                        </a>
                    </div>
                </div>
               


            </div>
        </div>
    </div>
</body>
<script>
!function($){


window.onload = function(){
    var my_slides = $('.swiper-slide'),
        my_tits_img = $('.tit img'),
        css3s = ['bounceInDown','bounceInLeft','bounceInRight','bounceIn','rubberBand','swing','tada','rotateInUpLeft','rotateInDownLeft','fadeInUp','fadeInDown'],
        animate_end = 'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend',
        delay_time = '0.5s';
        my_tits_img.hide();
        var mySwiper = new Swiper('.swiper',{
        mode: 'vertical',
        noSwiping:'true',
        onSlideChangeEnd:function(swiper){
            var actve_index = mySwiper.activeIndex,
                this_img = my_tits_img.eq(actve_index),
                this_img_ans = my_slides.eq(actve_index).find('.img_an');

             my_tits_img.hide();
             $('.img_an img').each(function(){
                $(this).removeClass('myanimate');
             })

            testAnim(this_img,css3s[Math.floor(Math.random()*css3s.length)],'animated',
                function(){
                    my_slides.eq(actve_index).find('.img_an').each(function(){
                        $(this).find('img').addClass('myanimate');
                    })
                });
            if(mySwiper.activeIndex == 8){
                $('.page8 .img5 img').click(function(){
                    mySwiper.swipeNext()
                })
            }

        }
    })


    function testAnim(obj,x,y,callBack){
        obj.removeClass().addClass(x + ' '+ y).show().one(animate_end, function(){
          $(this).removeClass();
          if(callBack)callBack();
        });
    };


    function init(){
        testAnim(my_tits_img.eq(0),css3s[Math.floor(Math.random()*css3s.length)],'animated',function(){
            my_slides.eq(0).find('.img_an').each(function(){
                $(this).find('img').addClass('myanimate');
            })
        });
    }

    init();
}
}(Zepto)
</script>
</html>